
    
     <!DOCTYPE html>
<html>
    <script>
   
        
    </script>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;padding:0;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix{
				clear: both;
				zoom: 1;
			}
			.shopping{
				width: 1200px;
				margin: 0 auto;
				font-size: 14px;
			}
			.shopping .header{
				width: 100%;
				height: 50px;
				line-height: 50px;
				background: #ccc;
				color: #000000;
				font-weight: bold;
				text-align: left;
			}
			.shopping .header ul{
				padding-left: 30px;
			}
			.shopping .header ul li{
				width: 190px;
				list-style: none;
			}
			.shopping .footer{
				width: 100%;
				height: 50px;
				background: #ccc;
				color: #000000;
				text-align: left;
			}
			.shopping .footer .footlf{
				width: 200px;
				line-height: 50px;
				margin-left: 30px;
			}
			.shopping .footer .footrg{
				width: 600px;
				text-align:right;
			
			}
			.shopping .footer .footrg span:nth-child(1){
				display: inline-block;
				padding: 0px 25px;
				background: black;
				color: white;
				line-height: 48px;
				margin-right: 20px;
			}
			.shopping .footer .footrg span:nth-child(2),.shopping .footer .footrg span:nth-child(3){
				display: inline-block;
				margin-right: 20px;
			}
			.shopping .footer .footrg span:nth-child(4){
				font-size:16px;
				font-weight: bold;
				line-height: 50px;
				margin-right: 50px;
			}
			.shopping .footer .footrg s{
				color: red;
			}
			.content{
				margin: 10px 0px;
			}
			.content dl{
				margin-bottom: 20px;
			}
			.content dl dt{
				border: 1px solid #CCCCCC;
				height: 30px;
				line-height: 30px;
				font-weight: bold;
			}
			.content dl dt{
				padding-left: 20px;
			}
			.content dl dd{
				padding-left: 20px;
				border: 1px solid #CCCCCC;
				height: 100px;
				line-height: 100px;
				border-top: none;
			}
			.content dl dd ul li{
				list-style: none;
			}
			.content dl dd ul li img{
				width: 80px;
				height: 80px;
				vertical-align: middle;
			}
			.content dl dd ul li{
				width: 190px;
			}
			.content dl dd ul li s{
				color: red;
				font-weight: bold;
			}
			.content dl dd ul li input{
				width: 30px;
			}
			s{
				text-decoration: none;
			}
			.content .del{
				cursor: pointer;
			}
			.minus{
				padding: 0px 10px;
				background: red;
				cursor: pointer;
			}
			.plus{
				padding: 0px 10px;
				background: red;
				cursor: pointer;
			}
			input{
				cursor: pointer;
			}

		</style>
	</head>
	<body>
			<div class="shopping">
				<div class="header clearfix">
					<ul>
						<li class="fl"><input type="checkbox" name="" class="all">全选</li>
						<li class="fl">商品</li>
						<li class="fl">单价</li>
						<li class="fl">数量</li>
						<li class="fl">价格</li>
						<li class="fl">操作</li>
				    </ul>
				</div>
				<div class="content">
					<dl>
						<dt>店铺：360商城1</dt>
						<dd>
							<ul>
								<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
								<li class="fl">
									<img src="imgs/saodi1.webp" />
									<span>电子拖地</span>
								</li>
								<li class="fl">
									<s>$<span class="price">100</span></s>
								</li>
								<li class="fl">
									<span class="minus">-</span>
									<input type="text" name="" class="count" value="1">
									<span class="plus">+</span>
								</li>
								<li class="fl">
									<s>$<span class="price_sum">100</span></s>
								</li>
								<li class="fl">
									<span class="del">删除</span>
								</li>
							</ul>
						</dd>
					</dl>
					<dl>
						<dt>店铺：360商城2</dt>
						<dd>
							<ul>
								<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
								<li class="fl">
									<img src="imgs/saodi2.webp" />
									<span>拖把</span>
								</li>
								<li class="fl">
									<s>$<span class="price">40</span></s>
								</li>
								<li class="fl">
									<span class="minus">-</span>
									<input type="text" name="" class="count" value="1">
									<span class="plus">+</span>
								</li>
								<li class="fl">
									<s>$<span class="price_sum">200</span></s>
								</li>
								<li class="fl">
									<span class="del">删除</span>
								</li>
							</ul>
						</dd>
					</dl>
					<dl>
						<dt>店铺：360商城3</dt>
						<dd>
							<ul>
								<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
								<li class="fl">
									<img src="imgs/saodi3.webp" />
									<span>电子锅</span>
								</li>
								<li class="fl">
									<s>$<span class="price">300</span></s>
								</li>
								<li class="fl">
									<span class="minus">-</span>
									<input type="text" name="" class="count" value="1" >
									<span class="plus">+</span>
								</li>
								<li class="fl">
									<s>$<span class="price_sum">300</span></s>
								</li>
								<li class="fl">
									<span class="del">删除</span>
								</li>
							</ul>
						</dd>
					</dl>
				</div>
				<div class="footer clearfix">
					<div class="footlf fl">
						<input type="checkbox" name="" class="all_is">反选
						<input type="checkbox" name="" id="cancel">取消
					</div>
					<div class="footrg fr">
						<span>继续购物</span>
						<span>已选商品<s id="piece">0</s>件</span>
						<span>合计(不含运费)：￥<s class="sum_">0.00</s></span>
						<span>结算</span>
					</div>
				</div>
			</div>
		
	</body>
	<script type="text/javascript">
		//购物车功能要求
		//1.勾选全选框 商品勾选状态为已勾选状态 并且计算商品合计  单价合计
		//2.取消勾选时取消所以商品勾选
		var del=document.getElementsByClassName("del");//删除
		var dl=document.getElementsByTagName("dl");
		var all=document.getElementsByClassName("all")[0];//获取全选按钮
		var all_is=document.getElementsByClassName("all_is")[0];//获取取反按钮
		var ischeck=document.getElementsByClassName("ischeck");//获取商品勾选状态复选框节点
		var minus=document.getElementsByClassName("minus");//商品减
		var plus=document.getElementsByClassName("plus");//商品加
		var count=document.getElementsByClassName("count");//商品数量
		var price=document.getElementsByClassName("price");//获得单价
		var price_sum=document.getElementsByClassName("price_sum");//获得商品价格
		var sum_=document.getElementsByClassName("sum_")[0];//获得商品总价格
		var piece=document.getElementById("piece");//已选商品件数
		var cancel=document.getElementById("cancel");//取消选择
		
		//全选功能
		all_();
		function all_(){
			all.onchange=function(){
				//当全选框状态为ture 的时候循环勾选  商品状态   为false 则相反
				if(all.checked){
					for(var i=0;i<ischeck.length;i++)
					{
						ischeck[i].checked=true;
				 	}
				 	piece_();//已选商品件数
				}
				else{
					for(var i=0;i<ischeck.length;i++)
					{
						ischeck[i].checked=false;
				 	}
				 	piece_();//已选商品件数
				}
				shss();//每次商品勾选或者数量发生改变计算总额数
			}
		}
		//商品状态勾选 
		comm_ischeck();
		function comm_ischeck(){
			for (var i=0;i<ischeck.length;i++) {
				(function(j){
					ischeck[j].onclick=function(){
						shss();//每次商品勾选或者数量发生改变计算总额数
						piece_();//每次商品勾选状态发生变化计算已选商品件数
		
						for (var k=0;j<ischeck.length;k++) {//循环判断商品勾选状态
							if (!ischeck[k].checked) {//如果有一个为flase 则全选框取消勾选
								all.checked = false;
									break; //结束循环
								}
							//否则勾选
							all.checked =true;
						}	
					}
				})(i)
			}
		}
		//反选
		all_iss();
		function all_iss(){
			all_is.onchange=function(){  
				//循环遍历勾选状态 商品状态勾选则取消勾选
				for(var i=0;i<ischeck.length;i++){
					ischeck[i].checked = ischeck[i].checked?false:true;
				}
				shss();//每次商品勾选或者数量发生改变计算总额数
				piece_();//每次商品勾选状态发生变化计算已选商品件数
			}
		}
		//减少商品
		add_is();
		function add_is(){
			for(var i=0;i<minus.length;i++){
				(function(i){
					minus[i].onclick=function(){
						if(parseInt(count[i].value)<2){
							count[i].value=1;
						}
						else{
							count[i].value=parseInt(count[i].value)-1;
						}
						// parseInt(count[i].value) 因为得到的value 是string 类型 运算需要进行类型转换
						//如果数量值<1默认为0
						//count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1);
						
						var pric=price[i].innerHTML;//商品单价
						price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量
		
						shss();//每次商品勾选或者数量发生改变计算总额数
						piece_();//每次商品勾选状态发生变化计算已选商品件数
					}
				})(i)
			}
		}
		//添加商品
		add();
		function add(){
			for(var i=0;i<plus.length;i++){
				//立即执行函数得到下标
				(function(i){
					plus[i].onclick=function(){
						var pric=price[i].innerHTML;//商品单价
						//因为得到的value 是string 类型 运算需要进行类型转换
						count[i].value=parseInt(count[i].value)+1;//改变数量值
						price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量
						shss();//每次商品勾选或者数量发生改变计算总额数
						piece_();//每次商品勾选状态发生变化计算已选商品件数
					}
				})(i)
			}
		}
		//count
		count_();
		function count_(){
			for(var i=0;i<count.length;i++){
				(function(i){
					count[i].onchange=function(){
						var pric=price[i].innerHTML;//商品单价
						//因为得到的value 是string 类型 运算需要进行类型转换
						count[i].value=parseInt(count[i].value)+1;//改变数量值
						price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品总结价格等于=商品单价*商品数量
						shss();//每次商品勾选或者数量发生改变计算总额数
						piece_();//每次商品勾选状态发生变化计算已选商品件数
					}
				})(i)
			}
		}
		
		//计算已选商品件数
		piece_();
		function piece_(){
			piece.innerHTML=0;
			for(var i=0;i<ischeck.length;i++){
				if(ischeck[i].checked){
					piece.innerHTML=parseInt(piece.innerHTML)+parseInt(count[i].value);
				}
			}
		}
		
		//计算商品总额
		shss();
		function shss(){
			sum_.innerHTML=0;
			for(var i=0;i<ischeck.length;i++){
				if(ischeck[i].checked){
					console.log(sum_.innerHTM);
					sum_.innerHTML=parseInt(sum_.innerHTML)+parseInt(price_sum[i].innerHTML);
				}
			}
		}
		
		//取消选择
		cancel_();
		function cancel_(){
			//取消按钮点击事件
			cancel.onclick=function(){
				for(var i=0;i<ischeck.length;i++){
					ischeck[i].checked=false;
				}
				shss();
				piece_();
			}
		}
		//删除
		del_();
		function del_(){
			for(var i=0;i<del.length;i++){
				(function(i){
					del[i].onclick=function(){
						dl[i].parentNode.removeChild(dl[i]);
						shss();//每次商品勾选或者数量发生改变计算总额数
						piece_();//每次商品勾选状态发生变化计算已选商品件数
					}
				})(i)
			}
		}

	</script>
</html>
